<!doctype html>
{% extends "base.html" %}
{% block title %}仪表盘{% endblock title %}
{% comment %} {% block page0_show %}show{% endblock page0_show %} {% endcomment %}
{% block page0_active %}active{% endblock page0_active %}
{% block main_content %}
{% load custom_filter %}
<div class="container-fluid p-0">
    <!-- 展示栏 start -->
    <div class="row">

        <div class="col-12 col-sm-6 col-xl d-flex">
            <div class="card flex-fill">
                <div class="card-body py-4">
                    <div class="d-flex">
                        <div class="d-inline-block mt-2 mr-3">
                            <i class="text-success fe fe-lg fe-activity"></i>
                        </div>
                        <div class="flex-fill">
                            <h3 class="mb-2"><a href="/monitor_zabbix" style="color: inherit;text-decoration: none;">受监控主机数</a></h3>
                            <div class="h3">{{ host_num }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6 col-xl d-flex">
            <div class="card flex-fill">
                <div class="card-body py-4">
                    <div class="d-flex">
                        <div class="d-inline-block mt-2 mr-3">
                            <i class="text-danger fe fe-lg fe-alert-octagon"></i>
                        </div>
                        <div class="flex-fill">
                            <h3 class="mb-2"><a href="/monitor_zabbix" style="color: inherit;text-decoration: none;">异常问题</a></h3>
                            <div class="h3">{{ error_host }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6 col-xl d-flex">
            <div class="card flex-fill">
                <div class="card-body py-4">
                    <div class="d-flex">
                        <div class="d-inline-block mt-2 mr-3">
                            <i class="text-warning fe fe-lg fe-download"></i>
                        </div>
                        <div class="flex-fill">
                            <h3 class="mb-2">异常域名/域名</h3>
                            <div class="h3">{{ error_domain }}/{{ all_domain }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6 col-xl d-flex">
            <div class="card flex-fill">
                <div class="card-body py-4">
                    <div class="d-flex">
                        <div class="d-inline-block mt-2 mr-3">
                            <i class="text-primary fe fe-lg fe-message-square"></i>
                        </div>
                        <div class="flex-fill">
                            <h3 class="mb-2"><a href="/crontab" style="color: inherit;text-decoration: none;">定时调度</a></h3>
                            <div class="h3">{{ cron_num }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 展示栏 end -->

    <!-- 正在告警的事项 start -->
    <div class="row">
        <div class="col-12 col-lg-12 d-flex">
            <div class="card flex-fill w-100">
                <div class="card-header">
                    <h5 class="card-title mb-0"><a href="/monitor_zabbix" style="color: inherit;text-decoration: none;">异常问题</a></h5>
                </div>
                <div class="card-body">
                    <ul class="timeline">
                    {% for Problme in ProblmeList %}
                        <li class="timeline-item">
                            <strong>{{ Problme.name }} </strong>
                            <span class="float-right text-muted text-sm">{{ Problme.clock|epoch }}</span>
                            <p>是否确认：{{ Problme.acknowledged|sured }}<br>
                            严重程度：{{ Problme.severity|severity }}</p>
                        </li>
                    {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 正在告警的事项 end -->

    <!-- 告警图 start -->
    <!-- 告警图 end -->

    <!-- 主机类别 start -->
    <!-- 主机类别 end -->

    <!-- 正在执行的任务 start -->
    <!-- 正在执行的任务 end -->

</div>
{% endblock main_content %}
